<template>
  <am-container>
    <am-row>
      <am-col :span="12">
        <am-table :data="prizeData">
          <am-table-column v-for="(item, index) in showCol" :key="index"
            :prop="item.prop"
            :label="item.label" />
        </am-table>
      </am-col>
      
      <!-- 分页 -->
      <am-col :span="12">
        <am-pagination align="right"
          :total="page.res.total"
          :page-size="page.limit"
          :show-page-btn-count="page.btns"
          v-model="page.num"
          @change="pageChange" />
      </am-col>
    </am-row>
  </am-container>
</template>

<script>
export default {
  name: 'personal-prize',
  data() {
    return {
      page: {// 分页
        btns: 2,
        num: 1,// 当前页
        limit: 8,// 每页几条数据
        res: {
          total: 0,
          count: 0
        }
      },
      prizeData: [],
      showCol: [{// 表格需要显示的字段
        prop: 'worksName',
        label: '作品名称'
      }, {
        prop: 'awardName',
        label: '奖品'
      }, {
        prop: 'logistics',
        label: '物流'
      }],
    }
  },
  methods: {
    ready() {
      this.loadData();
    },
    loadData() {
      return this.loadDesignerPrize();
    },
    loadDesignerPrize() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETPRIZEPAGEBYID, {
          gameID: +this.$store.getters.gameID,
          designerID: +this.designerID,
          pageNum: +this.page.num,
          numPerPage: +this.page.limit
        }).then(res => {
          if(!Array.isArray(res.data.data)) {
            console.log(res.data.data);
            this.page.res = res.data.data.page;
            this.prizeData = res.data.data.works;
          }
          if(this.prizeData.length === 0) {
            console.log('没有获奖');
          };
        }).catch(err => {
          this.$message({
            title: '加载获奖信息发生错误',
            type: 'error',
            message: err.msg,
            closeable: true
          });
        });
      });
    },
    pageChange(pageNum) {
      this.page.num = pageNum;
      this.loadDesignerPrize();
    }
  },
  props: {
    designerID: String
  },
  mounted() {
    console.log('prize mounted');
    this.ready()
  }
}
</script>